<script setup lang="ts">

import { onMounted, ref, watch } from 'vue';
import Board from './Board.vue';
import { Squares } from '../algotithm/check';

const current = ref<Squares>(Array<string | null >(9).fill(null));

// 记录历史
const history = ref<Squares[]>([]);
const addCurrent = () => {
  history.value.push([...current.value]);
};
onMounted(addCurrent);
watch<Squares>(current, addCurrent, { deep: true });
const historyInfo = (index:number) => {
  if (index === 0) {
    return '回到起始';
  }
  return `到第${index}步`;
};
const backToHistory = (index:number) => {
  current.value = [...history.value[index]];
  history.value = history.value.slice(0, index);
  console.log(history, index);
};

</script>

<template>
  <div class="game">
    <div class="game-board">
      <Board v-model:squares="current"/>
    </div>
    <div class="game-info">
      <div></div>
      <ol>
        <ul v-for="(_,index) in history" :key="index">
          <button @click="backToHistory(index)">
            {{ historyInfo(index) }}
          </button>
        </ul>
      </ol>
    </div>
  </div>
</template>

<style scoped>
body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}
</style>
